<template>
  <div>
    <!-- 顶部表单 -->
    <div class="print">
      <el-tooltip content="打印个人基本信息">
        <router-link :to="`/employees/print/${$route.params.id}?type=personal`">
          <i class="el-icon-printer" />
        </router-link>
      </el-tooltip>
    </div>
    <el-form
      ref="basicForm"
      label-position="left"
      label-width="120px"
      :model="userInfo"
      :rules="basicInfoRules"
    >
      <el-row type="flex" style="margin-top: 10px">
        <el-col :span="12" :offset="2">
          <el-form-item label="工号">
            <el-input v-model="userInfo.workNumber" style="width: 300px" />
          </el-form-item>
          <el-form-item label="姓名">
            <el-input v-model="userInfo.username" style="width: 300px" />
          </el-form-item>
          <el-form-item label="手机">
            <el-input v-model="userInfo.mobile" style="width: 300px" disabled />
          </el-form-item>
          <el-form-item label="员工头像">
            <UpdateImg ref="img" />
          </el-form-item>
          <el-form-item style="text-align: center">
            <el-button
              type="primary"
              @click="updateBasicInfo"
            >保存更新</el-button>
            <el-button @click="$router.back()">返回</el-button>
          </el-form-item>
        </el-col>
        <el-col :span="12" :offset="3">
          <el-form-item label="入职时间">
            <el-date-picker
              v-model="userInfo.timeOfEntry"
              style="width: 300px"
            />
          </el-form-item>
          <el-form-item label="部门">
            <el-input v-model="userInfo.departmentName" style="width: 300px" />
          </el-form-item>
          <el-form-item v-model="userInfo.departmentName" label="聘用形式">
            <el-select v-model="userInfo.formOfEmployment" style="width: 300px">
              <el-option label="正式" value="1" />
              <el-option label="非正式" value="2" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <!-- 下面表单 -->
    <el-row>
      <div class="info">基础信息</div>
      <el-form label-width="150px" label-position="left" :model="formData">
        <el-col class="col-top" :offset="2">
          <el-form-item label="最高学历">
            <el-select v-model="formData.theHighestDegreeOfEducation" style="width: 300px">
              <el-option
                v-for="item in Employees.highestDegree"
                :key="item.id"
                :label="item.value"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="员工照片"> <UpdateImg ref="img2" /> </el-form-item>
          <el-form-item label="国家/地区">
            <el-select v-model="formData.nationalArea" style="width: 300px">
              <el-option
                v-for="item in Employees.isOverseas"
                :key="item.id"
                :label="item.value"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="护照号">
            <el-input v-model="formData.passportNo" placeholder="正规护照格式" style="width: 300px" />
          </el-form-item>
          <el-form-item label="身份证号">
            <el-input v-model="formData.idNumber" placeholder="正规护身份证格式" style="width: 300px" />
          </el-form-item>
          <el-form-item label="籍贯">
            <el-input v-model="formData.nativePlace" placeholder="籍贯地址" style="width: 500px" />
          </el-form-item>
          <el-form-item label="民族">
            <el-input v-model="formData.nation" placeholder="请输入民族" style="width: 300px" />
          </el-form-item>
          <el-form-item label="婚姻状况">
            <el-select v-model="formData.maritalStatus" style="width: 300px">
              <el-option
                v-for="item in Employees.maritaStatus"
                :key="item.id"
                :label="item.value"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="生日">
            <el-input v-model="formData.birthday" placeholder="示例 0323" style="width: 300px" />
          </el-form-item>
          <el-form-item label="年龄">
            <el-input v-model="formData.age" placeholder="请输入年龄" style="width: 300px" />
          </el-form-item>
          <el-form-item label="星座">
            <el-select v-model="formData.constellation" style="width: 300px">
              <el-option
                v-for="item in Employees.constellation"
                :key="item.id"
                :label="item.value"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="血型">
            <el-select v-model="formData.bloodType" style="width: 300px">
              <el-option
                v-for="item in Employees.bloodType"
                :key="item.id"
                :label="item.value"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="户籍所在地">
            <el-input v-model="formData.domicile" style="width: 500px" />
          </el-form-item>
          <el-form-item label="政治面貌">
            <el-input v-model="formData.politicalOutlook" style="width: 300px" />
          </el-form-item>
          <el-form-item label="入党时间">
            <el-date-picker v-model="formData.timeToJoinTheParty" style="width: 300px" />
          </el-form-item>
          <el-form-item label="存档机构">
            <el-input v-model="formData.archivingOrganization" style="width: 500px" />
          </el-form-item>
          <el-form-item label="子女状态">
            <el-input v-model="formData.stateOfChildren" style="width: 500px" />
          </el-form-item>
          <el-form-item label="子女有无商业险">
            <el-radio-group v-model="formData.doChildrenHaveCommercialInsurance">
              <el-radio label="有" />
              <el-radio label="无" />
            </el-radio-group>
          </el-form-item>
          <el-form-item label="有无违法违纪状态">
            <el-input v-model="formData.isThereAnyViolationOfLawOrDiscipline" placeholder="请输入" style="width: 500px" />
          </el-form-item>
          <el-form-item label="有无重大病史">
            <el-input v-model="formData.areThereAnyMajorMedicalHistories" placeholder="请输入" style="width: 500px" />
          </el-form-item>
        </el-col>
        <div class="info">通讯信息</div>
        <el-col :offset="2" class="col-top">
          <el-form-item label="QQ">
            <el-input v-model="formData.qq" placeholder="请输入" style="width: 300px" />
          </el-form-item>
          <el-form-item label="微信">
            <el-input v-model="formData.wechat" placeholder="请输入" style="width: 300px" />
          </el-form-item>
          <el-form-item label="现居住地">
            <el-input v-model="formData.residenceCardCity" placeholder="请输入" style="width: 500px" />
          </el-form-item>
          <el-form-item label="通讯地址">
            <el-input v-model="formData. postalAddress" placeholder="请输入" style="width: 500px" />
          </el-form-item>
          <el-form-item label="联系手机">
            <el-input v-model="formData. contactTheMobilePhone" placeholder="请输入11位手机号" style="width: 300px" />
          </el-form-item>
          <el-form-item label="个人邮箱">
            <el-input v-model="formData.personalMailbox" placeholder="请输入" style="width: 500px" />
          </el-form-item>
          <el-form-item label="紧急联系人">
            <el-input v-model="formData.emergencyContact" placeholder="请输入" style="width: 300px" />
          </el-form-item>
        </el-col>
        <div class="info">账号信息</div>
        <el-col :offset="2" class="col-top">
          <el-form-item label="社保电脑号">
            <el-input v-model="formData.socialSecurityComputerNumber" placeholder="请输入" style="width: 300px" />
          </el-form-item>
          <el-form-item label="公积金账号">
            <el-input v-model="formData.providentFundAccount" placeholder="请输入" style="width: 300px" />
          </el-form-item>
          <el-form-item label="银行卡号">
            <el-input v-model="formData.bankCardNumber" placeholder="请输入" style="width: 300px" />
          </el-form-item>
          <el-form-item label="开户行">
            <el-input v-model="formData.openingBank" placeholder="请输入" style="width: 500px" />
          </el-form-item>
        </el-col>
        <div class="info">教育信息</div>
        <el-col :offset="2" class="col-top">
          <el-form-item label="学历类型">
            <el-select v-model="formData.educationalType" style="width: 300px">
              <el-option
                v-for="item in Employees.educationType"
                :key="item.id"
                :label="item.value"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="毕业学校">
            <el-input v-model="formData.graduateSchool" style="width: 300px" />
          </el-form-item>
          <el-form-item label="入学时间">
            <el-date-picker v-model="formData.enrolmentTime" style="width: 300px" />
          </el-form-item>
          <el-form-item label="毕业时间">
            <el-date-picker v-model="formData.graduationTime" style="width: 300px" />
          </el-form-item>
          <el-form-item label="专业">
            <el-input v-model="formData.major" style="width: 300px" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <div class="info">从业信息</div>
        <el-col :offset="2" class="col-top">
          <el-form-item label="上家公司">
            <el-input v-model="formData.homeCompany" style="width: 300px" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="职称">
            <el-input v-model="formData.title" style="width: 300px" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="有无竞业限制">
            <el-input v-model="formData.isThereAnyCompetitionRestriction" style="width: 700px" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="备注">
            <el-input
              v-model="formData.remarks"
              style="width: 700px"
              placeholder="请输入备注"
              type="textarea"
              :rows="2"
            />
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <el-row type="flex" justify="center">
      <el-col :span="8">
        <el-button type="primary" @click="updateStaffDetailedIn">保存更新</el-button>
        <el-button @click="$router.back()">返回</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Employees from '@/api/constant/employees' // 引入枚举数据
import {
  userInFormationApi,
  setEmployeeInformationApi,
  getStaffDetailedInfoApi,
  undataStaffDetailedInfoApi
} from '@/api'
export default {
  name: 'VueAdminTemplateMasterUserInfo',
  data() {
    return {
      Employees, // 枚举数据
      upload: '', // 照片状态
      userInfo: {
        workNumber: '', // 工号
        username: '', // 姓名
        mobile: '', // 手机号
        timeOfEntry: '', // 入职时间
        departmentName: '', // 部门
        formOfEmployment: '', // 聘用形式
        roleIds: []
      },
      basicInfoRules: {}, // 基本信息的表单验证
      formData: {
        userId: '',
        username: '', // 用户名
        sex: '', // 性别
        mobile: '', // 手机
        companyId: '', // 公司id
        departmentName: '', // 部门名称
        //  onTheJobStatus: '', // 在职状态 no
        dateOfBirth: '', // 出生日期
        timeOfEntry: '', // 入职时间
        theHighestDegreeOfEducation: '', // 最高学历
        nationalArea: '', // 国家
        passportNo: '', // 护照号
        idNumber: '', // 身份证号
        idCardPhotoPositive: '', // 身份证照正
        idCardPhotoBack: '', // 身份证照正
        nativePlace: '', // 籍贯
        nation: '', // 民族
        englishName: '', // 英文名字
        maritalStatus: '', // 婚姻状况
        staffPhoto: '', // 员工照片
        birthday: '', // 生日
        zodiac: '', // 属相
        age: '', // 年龄
        constellation: '', // 星座
        bloodType: '', // 血型
        domicile: '', // 户籍所在地
        politicalOutlook: '', // 政治面貌
        timeToJoinTheParty: '', // 入党时间
        archivingOrganization: '', // 存档机构
        stateOfChildren: '', // 子女状态
        doChildrenHaveCommercialInsurance: '1', // 保险状态
        isThereAnyViolationOfLawOrDiscipline: '', // 违法违纪状态
        areThereAnyMajorMedicalHistories: '', // 重大病史
        qq: '', // QQ
        wechat: '', // 微信
        residenceCardCity: '', // 居住证城市
        dateOfResidencePermit: '', // 居住证办理日期
        residencePermitDeadline: '', // 居住证截止日期
        placeOfResidence: '', // 现居住地
        postalAddress: '', // 通讯地址
        contactTheMobilePhone: '', // 联系手机
        personalMailbox: '', // 个人邮箱
        emergencyContact: '', // 紧急联系人
        emergencyContactNumber: '', // 紧急联系电话
        socialSecurityComputerNumber: '', // 社保电脑号
        providentFundAccount: '', // 公积金账号
        bankCardNumber: '', // 银行卡号
        openingBank: '', // 开户行
        educationalType: '', // 学历类型
        graduateSchool: '', // 毕业学校
        enrolmentTime: '', // 入学时间
        graduationTime: '', // 毕业时间
        major: '', // 专业
        graduationCertificate: '', // 毕业证书
        certificateOfAcademicDegree: '', // 学位证书
        homeCompany: '', // 上家公司
        title: '', // 职称
        resume: '', // 简历
        isThereAnyCompetitionRestriction: '', // 有无竞业限制
        proofOfDepartureOfFormerCompany: '', // 前公司离职证明
        remarks: '' // 备注
      }
    }
  },

  mounted() {},
  created() {
    this.userInFormation()
    this.getStaffDetailedInfo()
  },
  methods: {
    // 获取头部表单基本信息
    async userInFormation() {
      this.userInfo = await userInFormationApi(this.$route.params.id)
      // 通知子组件显示获取来的头像  ' '串要去除空格在判断
      if (this.userInfo.roleIds && this.userInfo.staffPhoto.trim()) {
        // upload表示该图片已经上传成功
        this.$refs.img.fileList = [{ url: this.userInfo.staffPhoto, upload: true }]
      }
    },

    // 获取下面的详细信息
    async getStaffDetailedInfo() {
      this.formData = await getStaffDetailedInfoApi(this.$route.params.id)
      if (this.formData.staffPhoto && this.formData.staffPhoto.trim()) {
        this.$refs.img2.fileList = [{ url: this.formData.staffPhoto, upload: true }]
      }
    },

    // 点击 -> 保存基本信息
    async updateBasicInfo() {
      await this.$refs.basicForm.validate()
      const fileList = this.$refs.img.fileList
      console.log(fileList)
      // 判断 子组件图片上传是否成功
      if (fileList.some(item => !item.upload)) {
        this.$message.warning('图片还没有上传成功！')
        return
      }
      // 将上传的图片保存 到表单数据中 如果没有头像则返回一个 ' ' 回显时判断显示空头像
      await setEmployeeInformationApi({ ...this.userInfo, staffPhoto: fileList.length ? fileList[0].url : ' ' })
      this.$message.success('保存基本息成功！')
      this.userInFormation()
    },

    // 点击 -> 保存详细信息
    async updateStaffDetailedIn() {
      const fileList = this.$refs.img2.fileList
      // 判断 子组件图片上传是否成功
      if (fileList.some(item => !item.upload)) {
        this.$message.warning('图片还没有上传成功！')
        return
      }
      await undataStaffDetailedInfoApi({ ...this.formData, id: this.$route.params.id, staffPhoto: fileList.length ? fileList[0].url : ' ' })
      this.$message.success('保存详细信息成功！')
    }
  }
}
</script>

<style lang="scss" scoped>
.print {
  display: flex;
  justify-content: end;
  width: 100%;
  height: 20px;
}
.info {
  border-bottom: 1px solid #e4e4e4;
}
.col-top {
  margin-top: 20px;
}
</style>
